<template>
  <el-menu
    :default-active="onRoutes"
    class="el-menu-vertical-demo"
    :collapse="collapse"
    text-color="#f0f0f0"
    :default-openeds="openeds"
    router
  >
    <template v-for="item in menus">
      <template v-if="item.children">
        <el-submenu :key="item.uri" :index="item.uri">
          <template #title :index="item.uri">
            <i :class="item.icon"></i>
            <span>{{ item.title }}</span>
          </template>
          <template v-for="subItem in item.children">
            <el-submenu
              v-if="subItem.children"
              :key="subItem.uri"
              :index="subItem.uri"
            >
              <template #title>
                {{ subItem.title }}
              </template>
              <el-menu-item
                v-for="(threeItem, i) in subItem.children"
                :key="i"
                :index="threeItem.uri"
              >
                {{ threeItem.title }}
              </el-menu-item>
            </el-submenu>
            <el-menu-item
              v-else
              :key="subItem.uri"
              :class="{ active: '/' + onRoutes == subItem.uri }"
              :index="subItem.uri"
            >
              <i :class="subItem.icon"></i>
              {{ subItem.title }}
            </el-menu-item>
          </template>
        </el-submenu>
      </template>
      <template v-else>
        <el-menu-item
          :key="item.uri"
          :index="item.uri"
          :class="{ active: '/' + onRoutes == item.uri }"
        >
          <i :class="item.icon"></i>
          <template #title>
            {{ item.title }}
          </template>
        </el-menu-item>
      </template>
    </template>
  </el-menu>
</template>
<script>
import { getUserName } from "@/api";
export default {
  name: "ZMenu", //靠这个名字递归
  data() {
    return {
      openeds: ["01", "02"],
      ggmenus: [
        {
          title: "模式切换",
          icon: "el-icon-sort",
          uri: "/Switchtest",
        },
        {
          title: "数据展示",
          icon: "el-icon-s-home",
          uri: "/index",
        },
        {
          title: "系统管理",
          uri: "02",
          icon: "el-icon-s-tools",
          children: [
            {
              title: "信息录入",
              uri: "/information",
              icon: "el-icon-edit-outline",
            },

            {
              title: "学生管理",
              uri: "/studentMaget",
              icon: "el-icon-xueshengguanli iconfont",
            },
          ],
        },
        {
          title: "系统日志",
          uri: "/systemlog",
          icon: "el-icon-xitongrizhi iconfont",
        },
      ],
      menus: [],
    };
  },
  computed: {
    onRoutes() {
      return this.$route.path.replace("/", "");
    },
    collapse() {
      return this.$store.state.collapse;
    },
    pxswitch() {
      return this.$store.state.pxswitch;
    },
  },
  watch: {
    pxswitch(newVal) {
      this.menus = [];
      if (newVal) {
        this.addMenusTrue();
      } else {
        this.addMenusFlase();
      }
    },
  },
  mounted() {
    this.queryInfo().then(() => {
      if (this.pxswitch) {
        this.addMenusTrue();
      } else {
        this.addMenusFlase();
      }
    });
  },
  methods: {
    handleRouter(menu) {
      // 跳转路由
      this.$router.push(menu.uri);
    },
    queryInfo() {
      return new Promise((reslove) => {
        getUserName({ usersAccount: this.$store.state.name }).then((res) => {
          res.data.usersRole == 1
            ? (this.ggmenus = [
                {
                  title: "模式切换",
                  icon: "el-icon-sort",
                  uri: "/Switchtest",
                },
                {
                  title: "数据展示",
                  icon: "el-icon-s-home",
                  uri: "/index",
                },
                {
                  title: "系统管理",
                  uri: "02",
                  icon: "el-icon-s-tools",
                  children: [
                    {
                      title: "信息录入",
                      uri: "/information",
                      icon: "el-icon-edit-outline",
                    },

                    {
                      title: "学生管理",
                      uri: "/studentMaget",
                      icon: "el-icon-xueshengguanli iconfont",
                    },
                    {
                      title: "用户管理",
                      uri: "/usertrol",
                      icon: "el-icon-s-custom",
                    },
                    {
                      title: "设备管理",
                      uri: "/DeviceManagement",
                      icon: "el-icon-monitor",
                    },
                  ],
                },
                {
                  title: "系统日志",
                  uri: "/systemlog",
                  icon: "el-icon-xitongrizhi iconfont",
                },
              ])
            : (this.ggmenus = [
                {
                  title: "模式切换",
                  icon: "el-icon-sort",
                  uri: "/Switchtest",
                },
                {
                  title: "数据展示",
                  icon: "el-icon-s-home",
                  uri: "/index",
                },
                {
                  title: "系统管理",
                  uri: "02",
                  icon: "el-icon-s-tools",
                  children: [
                    {
                      title: "信息录入",
                      uri: "/information",
                      icon: "el-icon-edit-outline",
                    },

                    {
                      title: "学生管理",
                      uri: "/studentMaget",
                      icon: "el-icon-xueshengguanli iconfont",
                    },
                  ],
                },
                {
                  title: "系统日志",
                  uri: "/systemlog",
                  icon: "el-icon-xitongrizhi iconfont",
                },
              ]);
          reslove();
        });
      });
    },
    addMenusTrue() {
      this.ggmenus.splice(
        2,
        0,
        {
          title: "到场人数",
          uri: "/Adinfo",
          icon: "el-icon-user-solid",
        },
        {
          title: "培训进程",
          uri: "/monitor",
          icon: "el-icon-chakanjincheng iconfont",
        },
        {
          title: "培训管理",
          uri: "/train",
          icon: "el-icon-peixunguanli iconfont",
        },
        {
          title: "考试分数",
          uri: "/grade",
          icon: "el-icon-pingfen2 iconfont",
        },
        {
          title: "培训数据",
          uri: "/TrainData",
          icon: "el-icon-notebook-2",
        }
      );
      this.menus = this.ggmenus;
    },
    addMenusFlase() {
      console.log("考试模式");
      this.ggmenus.splice(
        2,
        0,
        {
          title: "到场考生",
          uri: "/Adinfo",
          icon: "el-icon-user-solid",
        },
        {
          title: "考试进程",
          uri: "/monitor",
          icon: "el-icon-chakanjincheng iconfont",
        },

        {
          title: "考试管理",
          uri: "/Exama",
          icon: "el-icon-kaoshiguanli iconfont",
        },
        {
          title: "考试分数",
          uri: "/grade",
          icon: "el-icon-pingfen2 iconfont",
        },
        {
          title: "学生数据",
          uri: "/TrainData",
          icon: "el-icon-notebook-2",
        }
      );
      this.menus = this.ggmenus;
    },
  },
};
</script>
<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}
.el-menu {
  height: 100%;
  background-color: #006569;
}
.el-menu--collapse .el-submenu__title span {
  display: none;
}
.el-submenu__title {
  color: white;
}
.el-menu-item.is-active {
  background-color: #005d5d !important;
}
.active {
  background: #003838;
}
</style>
